import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Dimensions,
    TouchableOpacity,
    Image,
} from 'react-native';

export default class CommonAlertView extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.framebox}>

                    
                    {this.getcontainer()}

                    {
                        this.props.sureDes ?
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={this.sure}
                                style={styles.bottombox}>
                                <Text style={styles.btntext}>{this.props.sureDes}</Text>
                            </TouchableOpacity>
                            : null
                    }
                    {
                        this.props.cancelDes ?
                            <TouchableOpacity
                                activeOpacity={0.8}
                                onPress={this.cancel}
                                style={{marginTop:14, height:34,width:140, flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
                                <Text style={[styles.btntext,{color:'#999999'}]}>{this.props.cancelDes}</Text>
                            </TouchableOpacity>
                            : null
                    }

                </View>
            </View>
        );

    }

    constructor(props) {
        super(props);
    };


    sure = () => {
        if(this.props.sureAction) {
            this.props.sureAction();
        }
    }

    cancel = () => {
        if (this.props.cancelAction) {
            this.props.cancelAction();
        }
    }

    // 弹框中间内容部分
    getcontainer = () => {
        return (
            <View style={styles.noticebox}>
                {
                    this.props.title ?
                    <Text style={styles.titleText}>{this.props.title}</Text>
                    :
                    null
                }
                {
                    this.props.notice ?
                    <Text style={styles.noticedes}>{this.props.notice}</Text>
                    :
                    null
                }
            </View>
        )
    }

    componentWillMount() {

    }

}

const styles = StyleSheet.create({
    container: {
        position:'absolute',
        top:0,
        bottom:0,
        width: Constant.screen_width,
        height: Constant.screen_height,
        backgroundColor: 'rgba(0,0,0,0.6)',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    framebox: {
        width: '74%',
        paddingBottom: 24,
        paddingHorizontal: 24,
        backgroundColor: '#ffffff',
        borderRadius: 8,
        alignItems: 'center',
    },
    titlebox: {
        height: 63,
        width: '100%',
        backgroundColor: '#f9f9f9',
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titletext: {
        fontSize: 17,
        fontWeight: "bold",
        color: '#333333',
    },
    bottombox: {
        height: 40,
        width: 240,
        borderRadius: 6,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffde00',
    },
    btntext: {
        color: '#333',
        fontSize: 16,
        fontWeight: '500'
    },
    closeimg: {
        width: 34,
        height: 34,
        marginTop: 30,
    },

    noticebox: {
        marginTop: 32,
        marginBottom: 24,
    },
    titleText: {
        lineHeight: 26,
        fontSize: 18,
        color: '#222',
        fontWeight: '500',
        textAlign: 'center',
    },
    noticedes: {
        marginLeft: 30,
        marginRight: 30,
        marginTop: 8,
        lineHeight: 24,
        fontSize: 14,
        color: '#333333',
        textAlign: 'center',
    },
    closebox: {
        flexDirection: "row",
        justifyContent: 'center',
        alignItems: 'center',
    },
});
